<template>
  <div class="bottom">
    <div class="content">
      <img class="log-img" src="static/imags/logo.png"/>
      <span class="span" @click="go('/')">首页</span>
      <span class="span" @click="go('/write')">写作</span>
      <span class="span">议论文</span>
      <span class="span">抒情文</span>
      <span class="span" @click="go('/page-list')">最新</span>
      <span class="span" id="login" @click="go('/art-login')">登录</span>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'top-nav',
    components: {},
    data() {
      return {
        msg: 'hellow'
      }
    },
    methods: {
      testFunc: function () {
        console.log('testFunc')
      },
      go (path) {
          this.$router.push(path)
      }
    },
    created() {
      document.title = "template"
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped type="text/stylus" lang="stylus">
.bottom {
  /*position: fixed*/
  background: #323232
  color: white
  /*top: 0*/
  /*left: 0*/
  /*right: 0*/
  z-index: 999
  .content {
    /*padding: 15px 0*/
    position: relative
    height: 50px
    display: flex
    .span {
      padding: 0 50px
      font-size: 30px
      font-weight: normal
      margin: auto 0
    }
    .span:hover {
      color: gray
    }
    .log-img {
      height: 30px
      margin: auto 0

      /*margin-top: 10px*/
      /*vertical-align: middle*/
    }
    #login {
      position: absolute
      right: 0
      top: 2.5px
      /*margin-top: auto*/
      /*margin-bottom: auto*/
    }
  }
}
</style>
